<template>
  <el-dialog width="300px" title="打印订单" :visible.sync="showDia" v-if="showDia" append-to-body>
    <div class="print_container" ref="printDiv">
      <h1 >制冷联盟订单</h1>
      <span>****************************************************</span>
      <div class="section1">
        <h3 >{{order.merchant.name}}</h3>
        <h3 >在线支付预约</h3>
      </div>
      <span>****************************************************</span>
      <div class="section2">
        <label >期望送达时间：{{order.expect_ship_at}}</label>
        <label >订单备注：{{order.remark}}</label>
      </div>
      <span>****************************************************</span>
      <div class="section3">
        <label >订单编号：{{order.no}}</label>
        <label >下单时间：{{order.created_at}}</label>
      </div>
      <span>****************************************************</span>
      <div class="section4">
        <div style="border-bottom: 1px solid #DADADA; padding-bottom:10px;">
          <table class="table-css" style="width: 100%;">
            <thead>
              <tr>
                <td width="60%">菜单名称</td>
                <td width="20%">数量</td>
                <td width="20%">金额</td>
              </tr>
            </thead>
            <tbody>
              <template v-for="item in order.items">
                <tr :key="item.id">
                  <td>{{item.snapshot.title}}</td>
                  <td>{{item.amount}}</td>
                  <td>{{item.price}}</td>
                </tr>
                <tr>
                  <td>
                    <div v-if="isRefund(item.refund_status)">
                      已退款：
                      <span>{{item.refund_amt}}</span> 元
                    </div>
                    <div v-if="isRefund(item.refund_status)">
                      备注:
                      <span>{{item.refund_remark}}</span>
                    </div>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
        <div class="other_fee">
          <div class="total">
            <label class="left" >配送费</label>
            <label class="right" >{{order.freight}}</label>
            <div class="clearfix" ></div>
          </div>
        </div>
        <div class="total">
          <label class="left" >总计</label>
          <label class="right" >{{order.total_amount}}</label>
          <div class="clearfix" ></div>
        </div>
        <div class="total">
          <label class="left" >退款</label>
          <label class="right" >{{order.refund_amt}}</label>
          <div class="clearfix" ></div>
        </div>
        <div style="text-align: right;">
          <label>顾客已付款</label>
        </div>
        <span>****************************************************</span>
      </div>
      <div class="section5">
        <label >姓名：{{order.address.contact_name}}</label>
        <label >地址：{{order.address.address}}</label>
        <label >电话：{{order.address.contact_phone}}</label>
      </div>
      <span>****************************************************</span>
    </div>
    <el-row style="text-align:right; margin-top:10px;">
      <el-button type="primary" @click="printHtml">开始打印</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"
import { getLodop } from './LodopFuncs'

export default {
  name: "orderPrint",
  props: {
    title: {
      default: "商品"
    },
    row: {
      type: Object
    }
  },
  components: {
  },
  computed: {

  },
  filters: {
    numFilter: function (value) {
      let realVal = Number(value).toFixed(2)
      return realVal
    }
  },
  data() {
    return {
      showDia: false,
      order: {}
    }
  },
  methods: {
    handleShow(row) {
      this.showDia = true
      this.order = row
    },
    handleClose() {
      this.showDia = false
      this.order = {}
    },
    isRefund(status) {
      return status != 0
    },
    printHtml() {
      let LODOP = getLodop();

      this.$nextTick(() => {
        let html = this.$refs.printDiv.innerHTML
        LODOP.PRINT_INIT("打印任务名");
        LODOP.SET_PRINT_PAGESIZE(3, '480', '0', 2)
        
        var strStyleCSS="<style>*{padding:0;margin:0}body{width:180px;overflow: hidden;font-size:11px;}label{padding: 2px 0px;}.table-css{font-size:11px;}h1{font-size:20px}h3{font-size:16px}.left{float:left}.right{float:right}.clearfix{clear:both}ul{list-style:none}.print_container{width:180px}.section2 label{display:block}.section3 label{display:block}.section4 .total label{display:block;}.section4{width:180px}.section4 .other_fee{border-bottom:1px solid #dadada}.section5 label{display:block}</style>";
        var strFormHtml=strStyleCSS+"<body>"+html+"</body>";
        LODOP.ADD_PRINT_HTM(20, 0, '100%', '100%', strFormHtml);
        

       //LODOP.NEWPAGEA();

        /*
        LODOP.ADD_PRINT_TEXT(24, 10, '48mm', 54, "制冷联盟订单");
        LODOP.SET_PRINT_STYLEA(0, "FontName", "黑体");
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
        LODOP.ADD_PRINT_TEXT(57, 10, '48mm', 54, "****************************");
        LODOP.ADD_PRINT_TEXT(85, 10, '48mm', 54, "远仁杂货铺");
        LODOP.SET_PRINT_STYLEA(0, "FontName", "黑体");
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
        LODOP.ADD_PRINT_TEXT(115, 10, '48mm', 54, "在线支付预约");
        LODOP.SET_PRINT_STYLEA(0, "FontName", "黑体");
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
        LODOP.ADD_PRINT_TEXT(145, 10, '48mm', 54, "****************************");
        LODOP.ADD_PRINT_TEXT(178, 10, '48mm', 54, "期望送达时间:");
        LODOP.ADD_PRINT_TEXT(195, 10, '48mm', 54, "2019-02-16 11:11:11");
        LODOP.ADD_PRINT_TEXT(215, 10, '48mm', 54, "订单备注:");
        LODOP.ADD_PRINT_TEXT(235, 10, '48mm', 54, "我需要准时送达，十分的感谢你得帮助");

        LODOP.ADD_PRINT_TEXT(275, 10, '48mm', 54, "****************************");

        LODOP.ADD_PRINT_TEXT(305, 10, '48mm', 54, "订单编号:");
        LODOP.ADD_PRINT_TEXT(325, 10, '48mm', 54, "020190111235549553512");
        LODOP.ADD_PRINT_TEXT(355, 10, '48mm', 54, "下单时间:2019-01-12 07:55:49");
        LODOP.ADD_PRINT_TEXT(375, 10, '48mm', 54, "****************************");


        //菜单
        LODOP.ADD_PRINT_TEXT(400, 10, 105, 54, "菜单名称");
        LODOP.ADD_PRINT_TEXT(400, 115, 40, 54, "数量");
        LODOP.ADD_PRINT_TEXT(400, 154, 40, 54, "金额");

        LODOP.ADD_PRINT_TEXT(430, 10, 105, 54, "蒙牛奶特香草味牛奶243ml*12盒");
        LODOP.ADD_PRINT_TEXT(430, 115, 40, 54, "*1");
        LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
        LODOP.ADD_PRINT_TEXT(430, 154, 40, 54, "22");
        LODOP.SET_PRINT_STYLEA(0,"Alignment",2);

        LODOP.ADD_PRINT_TEXT(460, 10, '48mm', 54, "****************************");

        //金额信息
        LODOP.ADD_PRINT_TEXT(480, 10, 105, 54, "配送费");
        LODOP.ADD_PRINT_TEXT(480, 115, 65, 54, "10.00"); 
        LODOP.SET_PRINT_STYLEA(0,"Alignment",3);

        
        LODOP.ADD_PRINT_TEXT(500, 10, 105, 54, "总计");
        LODOP.ADD_PRINT_TEXT(500, 115, 65, 54, "20.00");
        LODOP.SET_PRINT_STYLEA(0,"Alignment",3);

        LODOP.ADD_PRINT_TEXT(520, 10, 105, 54, "退款");
        LODOP.ADD_PRINT_TEXT(520, 115, 65, 54, "1.00");  
        LODOP.SET_PRINT_STYLEA(0,"Alignment",3);


        LODOP.ADD_PRINT_TEXT(540, 10, '48mm', 54, "****************************");

        LODOP.ADD_PRINT_TEXT(560, 10, 40, 54, "姓名:");
        LODOP.ADD_PRINT_TEXT(560, 43, 150, 54, "黄杰"); 
        
        LODOP.ADD_PRINT_TEXT(580, 10, 40, 54, "地址:");
        LODOP.ADD_PRINT_TEXT(580, 43, 150, 54, "福建省福州市台江区街电(同绘馆艺术教育)12354"); 
        */


        //LODOP.ADD_PRINT_HTM(20, 35, '60%', '100%', this.$refs.printDiv.innerHTML);
        //LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", 'Auto-Width');
        LODOP.PRINT();
        //LODOP.PRINT_DESIGN();
      })
    }
  }
}

</script>

<style type="text/css" ref="orderStyle">
* {
  padding: 0;
  margin: 0;
}
h1 {
  font-size: 20px;
}
h3 {
  font-size: 16px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix {
  clear: both;
}
ul {
  list-style: none;
}
.print_container {
  overflow: hidden;
  width: 100%;
}
.table-css{

}
.section1 {
}
.section2 label {
  display: block;
}
.section3 label {
  display: block;
}
.section4 {
  width: 100%;
}
.section4 .total label {
  display: block;
}
.section4 .other_fee {
  border-bottom: 1px solid #dadada;
}
.section5 label {
  display: block;
}
</style>
